import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/01',
    name: '01',
    component: () => import('../testing/01.vue'),
  },
  {
    path: '/modify',
    name: 'Modify',
    component: () => import('../views/Modify.vue'),
    meta: {
      title: '读者蜂巢--个人信息修改',
    },
  },
  {
    path: '/vipagreement',
    name: 'Vipagreement',
    component: () => import('../views/Vipagreement.vue'),
    meta: {
      title: '读者蜂巢--vip服务条款',
    },
  },
  {
    path: '/magazinelist',
    name: 'MagazineList',
    component: () => import('../views/MagazineList.vue'),
    meta: {
      title: '读者蜂巢--杂志',
    },
  },
  { path: '/bookdetail/bookdetail/:lid', redirect: '/bookdetail/:lid' },
  {
    path: '/bookdetail/:lid',
    name: 'BookDetail',
    props: true,
    component: () => import('../views/BookDetail.vue'),
    meta: {
      title: '读者蜂巢--书详情页',
    },
  },
  {
    path: '/listenbooklist',
    name: 'ListenbookList',
    component: () => import('../views/ListenbookList.vue'),
    meta: {
      title: '读者蜂巢--数列表',
    },
  },
  {
    path: '/service',
    name: 'Service',
    component: () => import('../views/Service.vue'),
    meta: {
      title: '读者蜂巢--服务',
    },
  },

  {
    path: '/agreement',
    name: 'Agreement',
    component: () => import('../views/Agreement.vue'),
    meta: {
      title: '读者蜂巢--协议',
    },
  },
  // {
  //   path: '/searchresults',
  //   name: 'SearchResults',
  //   component: () => import('../views/SearchResults.vue'),
  //   meta: {
  //     title: '读者蜂巢--搜索结果',
  //   },
  // },
  {
    path: '/search',
    name: 'Search',
    component: () => import('../views/Search.vue'),
    meta: {
      title: '读者蜂巢--搜索',
    },
  },
  {
    path: '/register',
    name: 'Register',
    component: () => import('../views/Register.vue'),
    meta: {
      title: '读者蜂巢--注册',
    },
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('../views/Login.vue'),
    meta: {
      title: '读者蜂巢--登录',
    },
  },
  {
    path: '/wallet',
    name: 'Wallet',
    component: () => import('../views/Wallet.vue'),
    meta: {
      title: '读者蜂巢--钱包',
    },
  },
  {
    path: '/vip',
    name: 'Vip',
    component: () => import('../views/Vip.vue'),
    meta: {
      title: '读者蜂巢--Vip',
    },
  },
  {
    path: '/order',
    name: 'Order',
    component: () => import('../views/Order.vue'),
    meta: {
      title: '读者蜂巢--收藏',
    },
  },
  {
    path: '/me',
    name: 'Me',
    component: () => import('../views/Me.vue'),
    meta: {
      title: '读者蜂巢--我的',
    },
  },
  {
    path: '/',
    name: 'Home',
    component: () => import('../views/Home.vue'),
    meta: {
      title: '读者蜂巢',
    },
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue'),
  },
  {
    path: '*', //统配符, 匹配所有路径
    name: 'NotFound',
    component: () => import('../views/NotFound.vue'),
    meta: {
      title: '读者蜂巢--404',
    },
  },
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,
})
// 路由守卫: 路由每次发生跳转前, 都会在守卫处进行登记, 守卫决定是否允许你跳转 -- 路由前置守卫-跳转前触发
router.beforeEach((to, from, next) => {
  // 参数是固定的3个:
  // to: 要跳转到的位置
  // from: 当前位置
  // next: 放行, 允许跳转
  console.log('路由守卫被触发, 侦测到跳转操作...')
  console.log('from', from.fullPath)
  console.log('正在前往:', to) // 展开看看 meta 属性
  let title = to.meta.title //前往的页面的题目
  // 问题: 如何通过代码修改 标题栏的 内容
  document.title = title
  next()

  // if (to.name == 'NotFound') {
  //   next({
  //     path: '/listenbookList',
  //   })
  // }
  // console.log()
})
export default router
